<template>
  <div class="leftuppercontainer">
    <Card :title="title">
      <div class="padding">
        <table border="0">
          <thead class="thead">
            <tr>
              <td v-for="item in headers">{{ item }}</td>
            </tr>
          </thead>
          <div
            :style="{
              height: height + 'px',
              overflow: 'auto',
              minHeight: minHeight + 'px',
            }"
          >
            <Vue3SeamlessScroll
              :list="tableData"
              :step="0.5"
              :limitScrollNum="limitScrollNum"
              :hover="true"
              :wheel="true"
            >
              <tbody class="tbody">
                <tr v-for="item in tableData" @click="rowClick(item)">
                  <td v-for="ele in propsData">
                    <slot :name="ele" :row="item">
                      {{ item[ele] }}
                    </slot>
                  </td>
                </tr>
              </tbody>
            </Vue3SeamlessScroll>
          </div>
        </table>
      </div>
    </Card>
  </div>
</template>
<script setup>
import { defineExpose, ref, defineProps } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

import Card from "./Card.vue";
const props = defineProps({
  headers: {
    type: Array,
    default: () => [],
  },
  propsData: {
    type: Array,
    default: () => [],
  },

  height: {
    type: String,
    default: "200",
  },
  minHeight: {
    type: String,
    default: "0",
  },
  title: String,
  limitScrollNum: {
    type: Number,
    default: 7,
  },
});
const tableData = ref([]);
const setData = (data) => {
  tableData.value = data;
  // startRotation();
};
const timer = ref("");
const startRotation = () => {
  if (timer.value) {
    stopRotation();
  }
  timer.value = setInterval(() => {
    tableData.value.push(tableData.value[0]);
    tableData.value.shift();
  }, 1000);
};
const stopRotation = () => {
  clearInterval(timer.value);
};
defineExpose({
  setData,
});

const emits = defineEmits(["rowCilck"]);
const rowClick = (row) => {
  emits("rowCilck", row);
};
</script>
<style lang="scss" scoped>
.leftuppercontainer {
  overflow: auto;
}
table {
  text-align: center;
  color: #fff;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
}
.padding {
  padding: 5px !important;
  background: rgba(94, 138, 152, 0.2);
  border-radius: 5px;
}
table tbody {
  display: block;
  font-size: 12px;
}
.thead {
  background: rgba(0, 0, 0, 0.2);
  height: 33px;
  line-height: 33px;
  color: #ffffff;
  opacity: 0.5;
  font-family: "Microsoft YaHei";
  td {
    font-family: "Microsoft YaHei";
  }
}

.tbody {
  tr {
    height: 33px;
    line-height: 33px;
  }
  td {
    font-family: "Microsoft YaHei";
    font-size: 14px;
  }
  tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.2);
  }
}
table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table tbody tr td {
  width: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.color-font {
  color: #ffc916;
}
table thead {
  font-size: 12px;
}
</style>
